<template>
    <div class="commons-enable">
        <i class="el-icon-check green" v-if="currentVal"/>
        <i class="el-icon-close red" v-else/>
    </div>
</template>
<script lang="ts">
  import {Component, Prop, Vue, Watch} from 'vue-property-decorator';

  @Component
  export default class CommonsEnable extends Vue {
    @Prop({
      required: true
    })
    public value!: boolean;
    public currentVal: boolean = true;

    public created(): void {
      this.currentVal = this.value;
    }

    @Watch('value')
    public valueChangeHandler(val: boolean): void {
      this.currentVal = val;
    }
  }
</script>
<style scoped>
    .green {
        color: green;
    }

    .red {
        color: red;
    }
</style>
